<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize"
           status-icon>
    <el-form-item label="用户名" prop="account">
      <el-input v-model="ruleForm.account" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm.password" />
    </el-form-item>
    <el-form-item label="确认密码" prop="cfpassword">
      <el-input v-model="ruleForm.cfpassword" />
    </el-form-item>、
    <el-form-item label="">
      <el-button type="primary" @click="register(ruleFormRef)">注册</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue'


const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = ref({
  account: '',
  password: '',
  cfpassword: '',
})

const rules = ref({
  account: [
    { required: true, message: '请输入你的用户名', trigger: 'blur' },
    { pattern: /^[a-zA-Z]{6,10}$/, message: '用户名由英文字母组成，长度为6~10个字符', trigger: ['change', 'blur'] }
  ],
  password: [
    { required: true, min: 6, message: '请输入至少6个字符的密码', trigger: ['change', 'blur'] },
  ],
  cfpassword: [
    { required: true, message: '请输入至少6个字符的密码', trigger: ['change', 'blur'] },
    {
      validator: (rule, value, callback) => {
        console.log('rule', rule);
        console.log('value', value);
        if (value === ruleForm.value.password) {
          callback()
        } else {
          callback(new Error('两次密码输入不一致'))
        }
      }
    },
  ],

})

const register = (formEl) => {
  console.log(formEl);
  if (formEl) {
    formEl.validate((valid) =>{
      console.log('valid',valid);
      if(valid) {
        // 发起注册接口请求
      }
    })
  }

}

</script>
  